<template>
	<view class="zs">
		<!-- 搜索栏的开始 -->
		<view class="zs-search">
			<!-- 左边图片 -->
			<image class="zs-logo" src="@/static/images/logo.png"></image>
			<!-- 右边搜索栏 -->
			<view class="search" @tap="goSearch">
				<image class="search-bar-icon" src="@/static/images/icons/search.png"></image>
				<view class="text">搜索您想要的</view>
			</view>
		</view>
		<!-- 搜索栏的结束 -->

		<!-- 轮播图开始 -->
		<view class="zs-swiper">
			<swiper
				indicator-dots="true"
				autoplay="true"
				indicator-color="rgba(0,0,0,.2)"
				indicator-active-color="rgba(255,255,255,1)"
			>
				<swiper-item v-for="(item, index) in sliders.data" :key="item.id">
						
					<image class="swiper-image-item" :src="item.thumb" @click="goSliders(index)"/>
		
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图结束 -->

		<!-- 首页推荐开始 -->
		<view class="zs-course">
			<view class="course-item" v-for="(item, index) in recommend" :key="item.id">
				<view class="course-title">{{ item.name }}</view>
				<view class="course-list"><course :courses="item.courses" ></course></view>
			</view>
		</view>
		<!-- 首页推荐结束 -->
	</view>
</template>

<script>
import { request } from '@/request/request.js';
import course from '@/components/course.vue';
export default {
	components: {
		course
	},
	data() {
		return {
			// 轮播图数据
			sliders: [],
			// 首页推荐
			recommend: [],
			id:''
		};
	},
	async created() {
		// 获取轮播图的数据
		let res = await request({
			url: '/sliders',
			data: {
				platform: 'mini'
			}
		});
		// console.log(res);
		this.sliders = res.data;
		console.log(this.sliders);

		// 获取首页推荐数据
		let res1 = await request({
			url: '/index/banners'
		});
		console.log('222', res1.data.data);
		this.recommend = res1.data.data
		// console.log(this.recommend);
	},
	methods: {
		// goPage(index){
		// 	console.log(index)
		// }
		goSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		goSliders(index){
			console.log(this.sliders);
			let page = this.sliders.data[index].url
			uni.navigateTo({
				url:page
			})
			// console.log(page)
		}
	}
};
</script>

<style lang="scss">
.zs {
	.zs-search {
		width: 100%;
		height: 80rpx;
		display: flex;
		float: left;
		padding: 5rpx 20rpx 0 20rpx;
		.zs-logo {
			width: 240rpx;
			height: 60rpx;
			margin-top: 10rpx;
			margin-right: 30rpx;
		}
		.search {
			flex: 1;
			box-sizing: border-box;
			height: 80rpx;
			margin-right: 20rpx;
			border-radius: 50rpx;
			background-color: #eeeeee;
			display: flex;
			.search-bar-icon {
				width: 35rpx;
				height: 35rpx;
				// padding: 0 25rpx;
				margin-top: 25rpx;
				margin-left: 30rpx;
			}
			.text {
				flex: 1;
				height: 15rpx;
				line-height: 1;
				margin-top: 28rpx;
				margin-left: 20rpx;
				color: #ccccd3;
				font-size: 30rpx;
			}
		}
	}
	.zs-swiper {
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
		padding: 8rpx 15rpx;
		background-color: white;
		.swiper-image-item {
			width: 100%;
			height: 305rpx;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 15rpx;
		}
	}
	.zs-course {
		width: 100%;
		height: auto;
		float: left;
		padding-top: 40rpx;
		padding-bottom: 150rpx;
		background-color: #f2f2f2;
		.course-item {
			width: 100%;
			height: auto;
			float: left;
			box-sizing: border-box;
			padding-left: 15rpx;
			padding-right: 15rpx;
			background-color: white;
			margin-bottom: 60rpx;
			.course-title {
				width: 100%;
				height: auto;
				float: left;
				font-size: 50rpx;
				margin-top: 22rpx;
				// margin-bottom: 10rpx;
				font-weight: 700;
				line-height: 50rpx;
			}
			.course-list {
				width: 100%;
				height: auto;
				float: left;
			}
		}
	}
}
</style>
